import React from 'react';
import './SearchCategory.css';  // 导入CSS文件

const SearchCategory = ({ category, onCategoryChange }) => {
  const handleCategoryClick = (newCategory) => {
    console.log("Category changed to:", newCategory);  // Debugging: 输出新类别
    onCategoryChange(newCategory); // 更新父组件中的 category
  };

  return (
    <div className="search-category">
      <ul className="category-list">
        <li 
          className={category === 'topics' ? 'active' : ''} 
          onClick={() => handleCategoryClick('topics')}
        >
          话题
        </li>
        <li 
          className={category === 'posts' ? 'active' : ''} 
          onClick={() => handleCategoryClick('posts')}
        >
          帖子
        </li>
        <li 
          className={category === 'users' ? 'active' : ''} 
          onClick={() => handleCategoryClick('users')}
        >
          用户
        </li>
      </ul>
    </div>
  );
};

export default SearchCategory;

